<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-50 to-white">
    <!-- Hero区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16">
      <div class="text-center">
        <!-- unDraw插图 -->
        <div 
          ref="heroImageRef"
          class="mb-8 fade-in-section opacity-0 transition-opacity duration-1000"
        >
          <img
            src="https://illustrations.popsy.co/blue/remote-work.svg"
            alt="AI作文批改插图"
            class="w-full max-w-lg mx-auto"
          />
        </div>
        
        <!-- 主标题 -->
        <div
          ref="heroTitleRef"
          class="fade-in-section opacity-0 transition-all duration-1000"
        >
          <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
            你的专属作文辅导老师
          </h1>
          <p class="text-lg md:text-xl text-gray-600 mb-8">
            智能批改，精准建议，让写作进步看得见
          </p>
        </div>
        
        <!-- CTA按钮 -->
        <div 
          ref="heroCTARef"
          class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4 fade-in-section opacity-0 transition-all duration-1000"
        >
          <router-link
            v-if="isAuthenticated"
            to="/submit"
            class="inline-flex items-center space-x-2 px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all"
          >
            <PlusCircle class="w-5 h-5" />
            <span>开始批改</span>
          </router-link>
          <router-link
            v-else
            to="/register"
            class="inline-flex items-center space-x-2 px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all"
          >
            <span>开始使用</span>
          </router-link>
          <button
            v-if="!isAuthenticated"
            @click="scrollToFeatures"
            class="inline-flex items-center space-x-2 px-8 py-3 bg-white hover:bg-gray-50 text-gray-700 font-medium rounded-lg border border-gray-300 transition-colors"
          >
            <span>了解更多</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 特性介绍 -->
    <div ref="featuresRef" class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div 
          ref="featuresTitleRef"
          class="text-center mb-16 fade-in-section opacity-0 transition-all duration-1000"
        >
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            为什么选择我们
          </h2>
          <p class="text-xl text-gray-600">
            专业的AI技术，助力写作提升
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 特性1 -->
          <div 
            ref="feature1Ref"
            class="text-center p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow fade-in-section opacity-0"
            style="transition-duration: 1000ms"
          >
            <div class="w-16 h-16 bg-blue-100 text-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
              <Zap class="w-8 h-8" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">快速批改</h3>
            <p class="text-gray-600">
              AI智能分析，30秒内完成批改，提供详细的批改报告
            </p>
          </div>
          
          <!-- 特性2 -->
          <div 
            ref="feature2Ref"
            class="text-center p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow fade-in-section opacity-0"
            style="transition-duration: 1000ms; transition-delay: 200ms"
          >
            <div class="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
              <Target class="w-8 h-8" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">精准分析</h3>
            <p class="text-gray-600">
              多维度评分，涵盖内容、语言、结构等多个方面
            </p>
          </div>
          
          <!-- 特性3 -->
          <div 
            ref="feature3Ref"
            class="text-center p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow fade-in-section opacity-0"
            style="transition-duration: 1000ms; transition-delay: 400ms"
          >
            <div class="w-16 h-16 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
              <TrendingUp class="w-8 h-8" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">持续提升</h3>
            <p class="text-gray-600">
              针对性建议，帮助学生不断提高写作水平
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- CTA区域 -->
    <div 
      ref="ctaSectionRef"
      class="py-20 bg-gradient-to-r from-blue-600 to-indigo-600 text-white fade-in-section opacity-0 transition-all duration-1000"
    >
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">
          准备好提升写作水平了吗？
        </h2>
        <p class="text-xl mb-8 text-blue-100">
          立即注册，开始您的AI作文批改之旅
        </p>
        <router-link
          v-if="!isAuthenticated"
          to="/register"
          class="inline-flex items-center space-x-2 px-8 py-4 bg-white text-blue-600 text-lg font-semibold rounded-lg hover:bg-gray-100 transition-colors shadow-lg"
        >
          <span>免费注册</span>
        </router-link>
        <router-link
          v-else
          to="/submit"
          class="inline-flex items-center space-x-2 px-8 py-4 bg-white text-blue-600 text-lg font-semibold rounded-lg hover:bg-gray-100 transition-colors shadow-lg"
        >
          <PlusCircle class="w-6 h-6" />
          <span>开始批改</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { 
  PlusCircle, 
  History, 
  Zap, 
  Target, 
  TrendingUp 
} from 'lucide-vue-next';
import { useUserStore } from '../stores/user.js';

/**
 * HomePage 组件
 * 应用首页，展示产品特性和引导用户注册/使用
 * 包含滚动动画（fade-in on scroll）
 */

// ==================== Composition API ====================
const userStore = useUserStore();

// ==================== Refs ====================
const featuresRef = ref(null);
const heroImageRef = ref(null);
const heroTitleRef = ref(null);
const heroCTARef = ref(null);
const featuresTitleRef = ref(null);
const feature1Ref = ref(null);
const feature2Ref = ref(null);
const feature3Ref = ref(null);
const ctaSectionRef = ref(null);

// IntersectionObserver实例
let observer = null;

// ==================== Computed ====================

/**
 * 是否已登录
 */
const isAuthenticated = computed(() => userStore.isAuthenticated);

// ==================== Methods ====================

/**
 * 滚动到特性介绍
 */
const scrollToFeatures = () => {
  if (featuresRef.value) {
    featuresRef.value.scrollIntoView({ behavior: 'smooth' });
  }
};

/**
 * 初始化滚动动画
 */
const initScrollAnimation = () => {
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1,
  };

  observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, options);

  // 观察所有需要动画的元素
  const elementsToAnimate = [
    heroImageRef.value,
    heroTitleRef.value,
    heroCTARef.value,
    featuresTitleRef.value,
    feature1Ref.value,
    feature2Ref.value,
    feature3Ref.value,
    ctaSectionRef.value,
  ];

  elementsToAnimate.forEach((el) => {
    if (el) {
      // 设置初始transform
      el.style.transform = 'translateY(30px)';
      observer.observe(el);
    }
  });
};

/**
 * 清理observer
 */
const cleanup = () => {
  if (observer) {
    observer.disconnect();
  }
};

// ==================== Lifecycle ====================

onMounted(() => {
  initScrollAnimation();
});

onUnmounted(() => {
  cleanup();
});
</script>

<style scoped>
/* 滚动动画 */
.fade-in-section {
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-section.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 确保渐变背景流畅 */
.bg-gradient-to-b,
.bg-gradient-to-r {
  background-attachment: scroll;
}
</style>
